<template>
  <div class="outter">
    <ALLTAB :defaultKey="'汉堡'" :menu="menu" :caiping="{'caiping':caiping}">
      <template v-slot:searchmenu>
        <a-input-search style="width:50%;margin:10px auto;display:block" placeholder="搜索菜品" v-model="caiping"  enter-button />
        <FOODITEM v-for="(item, index) in searchmenu" :item="item" :key="index">
          <template v-slot:method>
            <div class="manyoutter">
              <img
                v-if="item.num > 0"
                @click="jian(item)"
                class="manyicon"
                src="@/assets/jian.png"
                alt=""
              />
              <div v-if="item.num > 0" class="many">{{ item.num }}</div>
              <img
                class="manyicon"
                @click="add(item)"
                src="@/assets/jia.png"
                alt=""
              />
            </div>
          </template>
        </FOODITEM>
      </template>
      <template v-slot:do="slotProps">
        <div class="manyoutter">
              <img
                v-if="slotProps.item.num > 0"
                @click="jian(slotProps.item)"
                class="manyicon"
                src="@/assets/jian.png"
                alt=""
              />
              <div v-if="slotProps.item.num > 0" class="many">{{ slotProps.item.num }}</div>
              <img
                class="manyicon"
                @click="add(slotProps.item)"
                src="@/assets/jia.png"
                alt=""
              />
            </div>
      </template>
    </ALLTAB>
    <div class="buy">
      <div class="table">
        <div @click="changeFullScreen" class="quanping">全屏模式</div>
        <span>桌号：</span>
        <a-select :maxTagCount="2" default-value="1" style="width: 120px;" :dropdownMenuStyle="{height:70+'px'}">
          <a-select-option value="1"> 1 </a-select-option>
          <a-select-option value="2"> 2 </a-select-option>
        </a-select>
      </div>
      <div class="detail">
        <div class="twoabsolute">
          <div class="twotitle">名称</div>
          <div class="twoprice">价格</div>
          <div class="twooutter">数量</div>
        </div>
        <div class="two" v-for="(item, index) in carmenu" :key="index">
          <div class="twotitle">{{ item.name }}</div>
          <div class="twoprice">￥{{ (item.price * item.num).toFixed(2) }}</div>
          <div class="twooutter">
            <img
              class="twoicon"
              @click="jian(item)"
              src="@/assets/jian.png"
              alt=""
            />
            <div class="many">{{ item.num }}</div>
            <img
              class="twoicon"
              @click="add(item)"
              src="@/assets/jia.png"
              alt=""
            />
          </div>
        </div>
      </div>
      <div class="total">
        <a-popconfirm
        :disabled="!(carmenu.length>0)"
    title="你确定清空购物车吗"
    ok-text="确定"
    cancel-text="取消"
    @confirm="clearall"
  ><div class="totalshop"><a class="totalshopa" href="javascript:;"><a-icon type="shopping-cart" />清空购物车</a></div></a-popconfirm>
        <div class="totalmany">合计：{{ totalmany.summany }}件</div>
        <div class="totalmuch">总价：{{ totalmany.summuch.toFixed(2) }}元</div>
        <a-button size="large" :disabled="!(carmenu.length>0)" class="totalbuy" type="primary" @click="zhifuvisible = true">结算</a-button>
      </div>
    </div>
    <a-modal
      title="支付"
      :visible="zhifuvisible"
      :confirm-loading="confirmLoading"
      @ok="submitsuccess"
      @cancel="handleCancel"
      okText="完成支付"
      cancelText="取消"
    >
      <img class="zhifu" src="@/assets/zhifu.png" alt="" />
    </a-modal>
  </div>
</template>

<script>
import ALLTAB from '@/components/alltab'
import FOODITEM from '@/components/foodItem'
export default {
  data() {
    return {
      caiping:"",
      confirmLoading: false,
      zhifuvisible: false,
      menu: {
        汉堡: [
          {
            name: "汉堡",
            num: 0,
            price: 99,
          },
          {
            name: "汉堡2",
            num: 0,
            price: 98,
          },
          {
            name: "汉堡3",
            num: 0,
            price: 90,
          },
          {
            name: "汉堡4",
            num: 0,
            price: 9,
          },
          {
            name: "汉堡5",
            num: 0,
            price: 7,
          },
          {
            name: "汉堡6",
            num: 0,
            price: 9,
          },
          {
            name: "汉堡7",
            num: 0,
            price: 66,
          },
          {
            name: "汉堡8",
            num: 0,
            price: 3,
          },
        ],
        可乐: [
          {
            name: "汉堡",
            num: 0,
            price: 99,
          },
          {
            name: "汉堡2",
            num: 0,
            price: 98,
          },
          {
            name: "汉堡3",
            num: 0,
            price: 90,
          },
          {
            name: "汉堡4",
            num: 0,
            price: 9,
          },
          {
            name: "汉堡5",
            num: 0,
            price: 7,
          },
          {
            name: "汉堡6",
            num: 0,
            price: 9,
          },
          {
            name: "汉堡7",
            num: 0,
            price: 66,
          },
          {
            name: "汉堡8",
            num: 0,
            price: 3,
          },
        ],
        薯条: [
          {
            name: "汉堡",
            num: 0,
            price: 99,
          },
          {
            name: "汉堡2",
            num: 0,
            price: 98,
          },
          {
            name: "汉堡3",
            num: 0,
            price: 90,
          },
          {
            name: "汉堡4",
            num: 0,
            price: 9,
          },
          {
            name: "汉堡5",
            num: 0,
            price: 7,
          },
          {
            name: "汉堡6",
            num: 0,
            price: 9,
          },
          {
            name: "汉堡7",
            num: 0,
            price: 66,
          },
          {
            name: "汉堡8",
            num: 0,
            price: 3,
          },
        ],
      },
    };
  },
  components:{FOODITEM,ALLTAB},
  computed: {
    // 自动生成购物车
    carmenu() {
      let car = [];
      for (let item in this.menu) {
        this.menu[item].map((item) => {
          if (item.num > 0) car.push(item);
        });
      }

      return car;
    },
    totalmany() {
      let summany = 0,
        summuch = 0;
      this.carmenu.map((item) => {
        summany += item.num;
        summuch += item.num * item.price;
      });
      return { summany, summuch };
    },
    searchmenu(){
      let car = [];
      for (let item in this.menu) {
        this.menu[item].map((item) => {
          if (item.name.indexOf(this.caiping)!==-1) car.push(item);
        });
      }
      return car;
    }
  },
  methods: {
    clearall(){
      for (let item in this.menu) {
        this.menu[item].map((item) => {
          item.num=0
        });
      }
    },
    submitsuccess() {
      this.zhifuvisible = false;
    },
    handleCancel() {
      this.zhifuvisible = false;
    },
    add(item) {
      item.num++;
    },
    jian(item) {
      item.num--;
    },
    changeFullScreen() {
      const element = document.documentElement;
      // 如果是全屏状态
      if (this.fullscreen) {
        // 如果浏览器有这个Function
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        // 如果浏览器有这个Function
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        }
      }
      // 判断全屏状态的变量
      this.fullscreen = !this.fullscreen;
    },
  },
};
</script>

<style scoped>

.outter {
  padding-left: 10px;
  /* width: 95%; */
}
.tab {
  width: 90%;
  height: 420px;
  overflow-y: scroll;
  padding-right: 5px;
}

.manyoutter {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.manyicon {
  height: 40px;
  width: 40px;
}
.many {
  font-size: 24px;
  font-weight: 900;
  margin: 0 8px;
}
.quanping {
  width: 100%;
  margin-bottom: 10px;
  border-radius: 20px;
  padding: 10px;
  background-color: rgb(231 231 231);
  font-size: 18px;
  font-weight: 900;
  color: white;
  text-align: center;
}
.table span {
  color: rgb(44, 44, 44);
  font-weight: 900;
  font-size: 22px;
}
.buy {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 95%;
  margin-top: 25px;
}
.twoicon {
  height: 25px;
  width: 25px;
}
.detail {
  width: 60%;
  height: 190px;
  overflow-y: scroll;
  border-radius: 15px;
  background-color: white;
  padding: 0px 15px 15px;
  color: rgb(44, 44, 44);
  font-size: 18px;
  font-weight: 900;
}
.two {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  
}
.twoabsolute{
  position:sticky;
  top:0;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  background-color:white ;
  z-index: 2;
  padding: 10px 0px;
}
.twotitle{
  width:30%
}
.twoprice{
  width: 30%;
}
.twooutter {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.totalshop{
  text-align: center;
}
.totalshopa{
  font-size: 19px;
  color: rgb(151, 151, 151);
  font-weight: 700;
}
.totalmany {
  font-size: 19px;
  color: rgb(151, 151, 151);
  font-weight: 700;
  text-align: center;
}
.totalmuch {
  font-size: 25px;
  color: rgb(44, 44, 44);
  font-weight: 700;
  text-align: center;
}
.totalbuy {
  text-align: center;
  width: 100%;
  /* line-height: 30px; */
  background-color: rgb(44, 44, 44);
  /* padding: 5px; */
  border-radius: 15px;
  color: white;
  font-weight: 900;
  font-size: 20px;
}
.zhifu {
  height: 300px;
  width: 300px;
  display: block;
  margin: 0 auto;
}
</style>
